<template>
    <div class="home-wrap">
        <el-row :gutter="10">
            <el-col>
                <div class="home-01-banner" :style="{backgroundImage:'url(' + homebannerimg+ ')'}">
                    <div class="home-01-text-wrap">
                        <div class="home-01-text-01">ICT梦想开始的地方</div>
                        <div class="home-01-text-02">ICT WHERE DREAM STARTS</div>
                        <div class="home-01-text-03-wrap">
                            <!-- <div class="home-01-text-03-item1">社会招生<img src="./img/homegoimg.png" class="home-01-text-03-go"/></div>
                            <div class="home-01-text-03-item2">高效招生<img src="./img/homegoimg.png" class="home-01-text-03-go"/> </div>
                            <div class="home-01-text-03-item3">企业培训及合作 <img src="./img/homegoimg.png" class="home-01-text-03-go"/></div> -->
                        <vButton v-for='item in entryButtonData' :key='item.text' @change="clickEntry" :item='item' class="_mr2"></vButton>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row> 
        <div class="home-02-wrap">
            <div class="home-02-log-wrap">
                <div class="home-02-log" v-for="(item,index) in home02log" :key="index">
                    <div  class="home-02-logimg"><img :src="item.imgurl"/></div>
                    <div class="home-02-logtext">{{item.text}}</div>
                </div>
            </div>
        </div>
        <div class="home-03-wrap">
            <div class="home-03-img-wrap">
                <img src="./img/home-03-img01.png" class="home-03-img01" />
                <img src="./img/home03dian.png"/>
            </div>
            <div class="home-03-content">
            <div class="home-03-textwrap">
                <div class="home-03-text">
                    <div class="home-03-text01">发布时间：14/10/2019</div>
                    <div class="home-03-text02">腾科联合上海应用技术大学共建特色产业学院洽谈会成功召开</div>
                    <div class="home-03-text03">洽谈会上，刘云翔院长简要介绍了学校的基本情况和对工学结合的校企合作人才培养的探索，希望能与我司在优势互补、平等合作、互利互惠、共同发展的基础上建立和发展全面的合作关系，建设集人才培养、技术研发......</div>
                    <div class="home-03-text04">活动详情</div>
                    <div class="home-03-text05">
                        <li>恭喜腾科8位学员11月5号获得RHCA（红帽云计算架构师）证书</li>
                        <li>科学腾科两位学员分别通过HCIE-CLOUD、HCIE-RS认证</li>
                        <li>腾科携手华为发布全云化ICT实验实训平台</li>
                    </div>
                </div>
            </div>
            </div>

        </div>
        <div class="home-04-wrap">
            <div class="home-04-title-wrap">
                <div class="home-04-title-01">腾科认证体系</div>
                <div class="home-04-title-02">课程涵盖大数据、网络、网络安全、云计算</div>
            </div>
            <div class="home-04-imgwrap">
                <div class="home-04-img" v-for="(item,index) in home04" :key="index" >
                    <img :src="item.imgurl" class="home-04-img01"/>
                    <router-link to="tengke"><div class="home-04-img-text01" @click="toTop">{{item.text1}}</div></router-link>
                    <div class="home-04-img-text02">{{item.text2}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import vButton from '../../components/button'
import homebannerimg from "./img/index-banner.jpg"
import home02log1 from "./img/home02log1.png"
import home02log2 from "./img/home02log2.png"
import home02log3 from "./img/home02log3.png"
import home02log4 from "./img/home02log4.png"
import home02log5 from "./img/home02log5.png"
import home02log6 from "./img/home02log6.png"

import home0401 from "./img/home0401.png"
import home0402 from "./img/home0402.png"
import home0403 from "./img/home0403.png"
import home0404 from "./img/home0404.png"
import home0405 from "./img/home0405.png"
import home0406 from "./img/home0406.png"
import home0407 from "./img/home0407.png"
import home0408 from "./img/home0408.png"
// import homegoimg from "./img/homegoimg.png"

export default {
    data(){
        return{
        homebannerimg:homebannerimg,
        home02log:[
            {
                imgurl:home02log1,
                text:"华为认证体系",
            },
                {
                imgurl:home02log2,
                text:"红帽认证体系",
            },
                {
                imgurl:home02log3,
                text:"思科认证体系",
            },
                {
                imgurl:home02log4,
                text:"甲骨文认证体系",
            },
                {
                imgurl:home02log5,
                text:"vmware认证体系",
            },
             {
                imgurl:home02log6,
                text:"python认证体系",
            },
        ],
        entryButtonData:[
        {text:'社会招生',active:true,name:'socialEnrollment'},
        {text:'高效模块',active:false,name:'collegeEnrollment'},
        {text:'企业培训及合作',active:false,name:'enterpriseEnrollment'},
      ],
        home04:[
            {
                imgurl:home0401,
                text1:"云计算",
                text2:'HCIA-Big Data认证定位于大数据技术的普及，华为FusionInsight HD解决方案。',
            },
             {
                imgurl:home0402,
                text1:"数据",
                text2:'HCIA-Big Data认证定位于大数据技术的普及，华为FusionInsight HD解决方案。',
            },
             {
                imgurl:home0403,
                text1:"物联网",
                text2:'HCIA-Big Data认证定位于大数据技术的普及，华为FusionInsight HD解决方案。',
            },
             {
                imgurl:home0404,
                text1:"人工智能",
                text2:'HCIA-Big Data认证定位于大数据技术的普及，华为FusionInsight HD解决方案。',
            },
             {
                imgurl:home0405,
                text1:"安全",
                text2:'HCIA-Big Data认证定位于大数据技术的普及，华为FusionInsight HD解决方案。',
            },
             {
                imgurl:home0406,
                text1:"项目管理",
                text2:'HCIA-Big Data认证定位于大数据技术的普及，华为FusionInsight HD解决方案。',
            },
             {
                imgurl:home0407,
                text1:"虚拟化",
                text2:'HCIA-Big Data认证定位于大数据技术的普及，华为FusionInsight HD解决方案。',
            },
             {
                imgurl:home0408,
                text1:"5G",
                text2:'HCIA-Big Data认证定位于大数据技术的普及，华为FusionInsight HD解决方案。',
            },

        ]
        }
    },
    mounted(){

        // 只有首页要commit这个方法changeNavStatus为ture，其余所有页面都要commit为false
        this.$store.commit('changeNavStatus',true)
    },
     methods:{
         toTop(){
            window.scroll(0,0)
         },
    clickEntry(data){    //入口按钮点击处理
      const obj = this.entryButtonData.filter(item=>{
        return item.text == data.text
      })
      this.entryButtonData = this.entryButtonData.map(item=>{
        if(item.text == data.text){
          item.active = true      //点中的按钮变激活
        }else{
          item.active = false     //其余的都变成不激活
        }
        return item               //把新数组返回并且重新赋值给this.entryButtonData，页面就可以自动渲染
      })
      // 如果能过滤出目标，就用目标的name来跳转
      if(obj[0]) this.$router.push({ name: obj[0].name})
    },
   
  },
    components:{
        vButton
    }
}
</script>
<style lang="stylus">
@import "./home.css";
</style>